<template>
  <div class="container">
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="其他资源">
        <div class="border_head">
          <div class="search_input">
            <el-input v-model="searchInput" placeholder="请输入资源名"></el-input>
            <el-button class="searchbtn" type="primary" @click="search">
              搜索
            </el-button>
          </div>
          <div class="submmit_selects">
            <el-button class="submmitbtn" type="danger" @click="submmit">
              确定
            </el-button>
          </div>
        </div>
        <el-table
            :data="otherResList"
            ref="multipleTable"
            tooltip-effect="dark"
            border
            @selection-change="handleSelectionChange0"
        >
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="resourceName"
              label="资源名"
              height="10"
              width="200">
          </el-table-column>
          <el-table-column label="发布时间"
                           width="245">
            <template slot-scope="scope">
              {{ dateFormat(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="更新时间"
                           width="245">
            <template slot-scope="scope">
              {{ dateFormat(scope.row.updateTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="success"
                  style="width: 100%; height: 100%;"
                  @click="detail(scope.row)">查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top: 20px;float: right"
                       background
                       layout="prev, pager, next"
                       :page-size="pageSize"
                       :total="total"
                       @current-change="page">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="视频资源">
        <div class="border_head">
          <div class="search_input">
            <el-input v-model="searchInput" placeholder="请输入资源名"></el-input>
            <el-button class="searchbtn" type="primary" @click="search">
              搜索
            </el-button>
          </div>
          <div class="submmit_selects">
            <el-button class="submmitbtn" type="danger" @click="submmit">
              确定
            </el-button>
          </div>
        </div>
        <el-table
            :data="vedioResList"
            ref="multipleTable"
            tooltip-effect="dark"
            border
            @selection-change="handleSelectionChange1"
        >
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="resourceName"
              label="资源名"
              height="10"
              width="200">
          </el-table-column>
          <el-table-column label="发布时间"
                           width="245">
            <template slot-scope="scope">
              {{ dateFormat(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="更新时间"
                           width="245">
            <template slot-scope="scope">
              {{ dateFormat(scope.row.updateTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="success"
                  style="width: 100%; height: 100%;"
                  @click="detail(scope.row)">查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top: 20px;float: right"
                       background
                       layout="prev, pager, next"
                       :page-size="pageSize"
                       :total="total"
                       @current-change="page">
        </el-pagination>
      </el-tab-pane>

    </el-tabs>
    <!-- 详情弹框 -->
    <el-dialog :title="detailDialogTitle" :visible="detailDialogVisible" @close="detailDialogVisible = false">
      <a :href="url" target="_blank">{{ resourceType == "0" ? '点击下载' : '点击跳转播放' }}</a>
    </el-dialog>

  </div>

</template>

<script>
export default {
  name: "ResourceList",
  data() {
    return {
      resourceType: "0",//默认视频资源 1视频资源 0非视频资源
      detailDialogVisible: false,
      addDialogVisible: false,
      vedioResList: [],
      otherResList: [],
      pageSize: 5,
      total: null,
      searchInput: '',
      user: JSON.parse(localStorage.getItem("user")),
      url: '',
      detailDialogTitle: '',
      multipleSelection0: [],
      multipleSelection1: [],
      //提交表单
      form: {
        classIdid: this.$route.query.classIdid,
        dirId: this.$route.query.dirId,
        resourceIds: []
      },
      rePath: this.$route.query.rePath
    }
  },
  methods: {
    //转换日期格式
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    //切换tab点击事件
    handleClick(tab, event) {
      this.resourceType = tab.index;
      console.log(this.resourceType);
    },
    //分页事件
    page(currentPage) {
      const _this = this;
      if (_this.form.resourceType === 0) {
        axios.get("http://localhost:8080/resourceInfo/findByType/0/" + currentPage + _this.pageSize).then(function (resp) {
          _this.otherResList = resp.data.data.content;
          _this.pageSize = resp.data.data.size
          _this.total = resp.data.data.total
          console.log(resp.data.data.content)
        })
      } else if (_this.form.resourceType === 1) {
        axios.get("http://localhost:8080/resourceInfo/findByType/1/" + currentPage + _this.pageSize).then(function (resp) {
          _this.otherResList = resp.data.data.content;
          _this.pageSize = resp.data.data.size
          _this.total = resp.data.data.total
          console.log(resp.data.data.content)
        })
      }
    },
    //详情展示
    detail(row) {
      this.detailDialogVisible = true
      this.detailDialogTitle = row.resourceName;
      this.url = row.resourceUrl;
    },
    //模糊查找
    search() {
      const _this = this;
      console.log(typeof _this.searchInput)
      console.log(_this.searchInput.length)

      //如果为空重新查询
      if (_this.searchInput == '' || _this.searchInput == null || _this.searchInput.length == 0) {
        location.reload()
        return
      }
      // searchInput
      if (_this.resourceType == '0') {
        axios.get("http://localhost:8080/resourceInfo/findByName/0/" + _this.searchInput + "/1/100").then(function (resp) {
          _this.otherResList = resp.data.data.content;
          _this.pageSize = resp.data.data.size
          _this.total = resp.data.data.total
          console.log(resp.data.data.content)
        })
      } else if (_this.resourceType == '1') {
        axios.get("http://localhost:8080/resourceInfo/findByName/1/" + _this.searchInput + "/1/100").then(function (resp) {
          _this.vedioResList = resp.data.data.content;
          _this.pageSize = resp.data.data.size
          _this.total = resp.data.data.total
          console.log(resp.data.data.content)
        })
      }
    },
    //选中行数改变监听
    handleSelectionChange0(val) {
      console.log(resourceIds)
      var resourceIds = val.map((item, index) => {
        return item.resourceId;
      })
      console.log(resourceIds.length)
      this.multipleSelection0 = resourceIds;
      console.log(this.multipleSelection1 + resourceIds)
    },
    //选中行数改变监听
    handleSelectionChange1(val) {
      var resourceIds = val.map((item, index) => {
        return item.resourceId;
      })
      console.log(resourceIds.length)
      this.multipleSelection1 = resourceIds;
      console.log(this.multipleSelection0 + resourceIds)
    },
    //提交选中
    submmit() {
      const _this = this;
      //将两种资源转换到返回对象
      _this.multipleSelection0.filter((item, index) => {
        _this.form.resourceIds.push(item);
      })
      _this.multipleSelection1.filter((item, index) => {
        _this.form.resourceIds.push(item);
      })
      axios.post("http://localhost:8080/classDirResource/add", _this.form).then((res) => {
        if (res.data.code == -1) {
          _this.$alert('资源添加失败', '错误', {
            confirmButtonText: '确定'
          });
        }
        if (res.data.code == 0) {
          this.$router.push({
            path: _this.rePath,
          });
        }
      })
    }
  },
  created() {
    console.log("this.form")
    console.log(this.form)
    const _this = this;
    axios.get("http://localhost:8080/resourceInfo/findByType/0/1/" + _this.pageSize).then(function (resp) {
      _this.otherResList = resp.data.data.content;
      _this.pageSize = resp.data.data.size
      _this.total = resp.data.data.total
      console.log(resp.data.data.content)
    })
    axios.get("http://localhost:8080/resourceInfo/findByType/1/1/" + _this.pageSize).then(function (resp) {
      _this.vedioResList = resp.data.data.content;
      _this.pageSize = resp.data.data.size
      _this.total = resp.data.data.total
      console.log(resp.data.data.content)
    })
  }
}
</script>

<style scoped>
.container {
  width: 60%;
  margin: 50px auto;
  color: black;
}

.border_head {
  display: flex;
  justify-content: space-between;
}

.searchbtn, .submmitbtn {
  margin: 0px;
  margin-left: 5px;
  height: 40px;
}

.search_input {
  display: flex;
  justify-content: right;
  margin: 10px;
}

.submmit_selects {
  margin: 10px;
}
</style>
